﻿<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>热表推送工控网附件上传</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
    <link rel="stylesheet" href="/InSiteWebApplication/Content/webuploader/webuploader.css" />
    <style type="text/css">
        .webuploader-pick
        {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 5px 15px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            font-size: 15px;
        }
        
        #temUploader .webuploader-pick
        {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="ufcSectionStyle">
        <span class="ufcSectionSpanStyle">导入区域</span>
    </div>
    <div style="margin: 10px 10px 3px 10px; width: 100%">
        <div id="uploader" class="wu-example">
            <div class="divLabel" style="float: left; margin-top: 9px; font-size: 16px">
                文件名：</div>
            <div style="float: left; margin-top: 5px">
                <input id="txtExcelFileName" class="easyui-textbox" type="text" style="width: 300px;
                    height: 30px; float: left;" readonly="readonly" />
                <input id="txtExcelFileId" type="hidden" />
            </div>
            <div style="float: left;" class="btns">
                <div id="picker" style="float: left; margin-left: 5px;">
                    选择文件</div>
                <button id="ctlBtn" class="easyui-linkbutton" style="float: left; margin-left: 5px;
                    margin-top: 6px; height: 28px; width: 120px;">
                    上传</button>
            </div>
            <div style="float: left; margin-left: 10px; margin-top: 9px">
                <span style="color: red; font-weight: bold; font-size: 16px">内部系统，禁止处理涉密信息！</span>
            </div>
        </div>
    </div>
    <div id="statusMessage" style="font-size: 16px; height: 40px; margin-top: 10px; margin-left: 10px; float:left;
        width: 100%">
    </div>
</body>
</html>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/json2.js" type="text/javascript"></script>
<script type="text/javascript" src="/InSiteWebApplication/Content/webuploader/webuploader.js"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script type="text/javascript">
    var page = {
        rootPath: getRootPath(), //网站根路径
        init: function () {
            $('#picker').css("padding", "5px 10px"); //改变上传按钮样式
            page.upload();
        },
        //上传excel
        upload: function () {
            var uploader = WebUploader.create({
                // swf文件路径
                swf: page.rootPath + "/Content/webuploader/Uploader.swf",
                // 文件接收服务端。
                server: page.rootPath + '/Ashx/ReBiaoConainer/RbSendToDataWenterHandler.ashx',
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                formData: {
                    action: "UploadFilesToDC"
                },
                multiple: false,
                timeout: 10 * 60 * 1000
            });
            //上传
            $('#ctlBtn').on("click", function () {
                var filename = $('#txtExcelFileName').textbox('getValue');
                if (filename == "") {
                    displayMessage("未选择文件", false);
                } else {
                    $('#ctlBtn').attr("disabled", "disabled"); //禁用按钮
                    $.messager.progress({ text: '', msg: '处理中...' });
                    uploader.upload();
                }
            });
            // 当有文件被添加进队列的时候，每次只传一个文件
            uploader.on('fileQueued', function (file) {
                if ($('#txtExcelFileId').val() != "") {
                    var f = uploader.getFile($('#txtExcelFileId').val()); //找到上一次队列中的文件
                    uploader.removeFile(f, true); //删除掉上一次队列中的文件
                }
                $('#txtExcelFileName').textbox('setValue', file.name);
                $('#txtExcelFileId').val(file.id);
            });
            //上传成功
            uploader.on('uploadSuccess', function (file, response) {
                displayMessage("", true);
                $.messager.progress('close');
                var result = response;
                displayMessage(result.Message, result.Result);
                var f = uploader.getFile(file.id); //找到上传的文件
                uploader.removeFile(f, true); //将其从队列中的删掉
                $('#txtExcelFileName').textbox('setValue', "");
                $('#txtExcelFileId').val("");
                $('#ctlBtn').removeAttr("disabled"); //恢复按钮
            });
            //上传失败
            uploader.on('uploadError', function (file, reason) {
                $.messager.progress('close');
                displayMessage("上传失败，原因：" + reason, false);
                var f = uploader.getFile(file.id); //找到上传的文件
                uploader.removeFile(f, true); //将其从队列中的删掉
                $('#txtExcelFileName').textbox('setValue', "");
                $('#txtExcelFileId').val("");
                $('#ctlBtn').removeAttr("disabled"); //恢复按钮
            });
        }
    };
    page.init();
</script>
